<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" style="margin-top:20px;">
      <a-col :sm="24" :md="4" :xl="16">
        <a-card class="box1" style="height:230px;">
          <img style="" src="./img/1.png" alt="" />
          <span class="s1">疑似受害人手机号</span><span class="s2">{{VictimWarningInfoData.msisdn}}</span>
          <p>最新预警时间：<span>{{VictimWarningInfoData.earlyWarningTime}}</span></p>
          <p>
            预警总计：<a-tag color="pink" style="margin-left: 27px;" >
              {{ VictimWarningInfoData.warningTotal }}
            </a-tag>
          </p>
          <p>
            劝阻累计次数：<a-tag color="pink" >
              {{ VictimWarningInfoData.dissuadedTotal }}
            </a-tag>
          </p>
          <div class="p1" >
            <img src="./img/ip.png" alt="" v-show="VictimWarningInfoData.latestLocation && VictimWarningInfoData.updateTime"/>
            <p>{{VictimWarningInfoData.latestLocation}}</p>
            <p>{{VictimWarningInfoData.updateTime}}</p>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="4" :xl="8">
        <a-card style="height:230px;">
          <a-tag style="margin-top:10px;" v-for="item in VictimWarningInfoData.fzVictimTotalList" :key="item.id">
            {{ item.fraudType }}:{{ item.totalNum }}
          </a-tag>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top:20px;">
      <a-col :span="24">
        <a-card title="疑似受害人基本信息">
          <table class="table_box" border="1" bordercolor="#ccc" cellspacing="0" cellpadding="5">
            <tr>
              <td class="t1">受害人姓名</td>
              <td class="t2">{{ victimBaseInfoData.name }}</td>
              <td class="t1">受害人身份证号</td>
              <td class="t2">{{ victimBaseInfoData.idNumber }}</td>
              <td class="t1">受害人银行卡号</td>
              <td class="t2">{{ victimBaseInfoData.bankAccount }}</td>
              <td class="t1">受害人支付宝账号</td>
              <td class="t2">{{ victimBaseInfoData.victimAlipayAccount }}</td>
            </tr>
            <tr>
              <td class="t1">受害人微信账号</td>
              <td class="t2">{{ victimBaseInfoData.victimWechatAccount }}</td>
              <td class="t1">受害人QQ号</td>
              <td class="t2">{{ victimBaseInfoData.victimQqNumber }}</td>
              <td class="t1">归属省份</td>
              <td class="t2">{{ victimBaseInfoData.belongProv }}</td>
              <td class="t1">归属城市</td>
              <td class="t2">{{ victimBaseInfoData.belongCity }}</td>
            </tr>
            <tr>
              <td class="t1">省份</td>
              <td class="t2">{{ victimBaseInfoData.prov }}</td>
              <td class="t1">地级</td>
              <td class="t2">{{ victimBaseInfoData.city }}</td>
              <td class="t1">县级</td>
              <td class="t2">{{ victimBaseInfoData.district }}</td>
              <td class="t1">乡级</td>
              <td class="t2">{{ victimBaseInfoData.township }}</td>
            </tr>
            <tr>
              <td class="t1">村级</td>
              <td class="t2">{{ victimBaseInfoData.village }}</td>
              <td class="t1">机构/部门</td>
              <td class="t2">{{ victimBaseInfoData.orgDeptCname }}</td>
              <td class="t1">定位依据</td>
              <td class="t2">{{ victimBaseInfoData.positioningBasis }}</td>
              <td class="t1">最新位置</td>
              <td class="t2">{{ victimBaseInfoData.latestLocation }}</td>
            </tr>
            <tr>
              <td class="t1">最新位置时间</td>
              <td class="t2" colspan="7">{{ victimBaseInfoData.latestLocationTime }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top:20px;">
      <a-col :span="24">
        <a-card title="历史涉诈域名 ">
          <a-timeline v-for="(item,index) in historyFraudData" :key="index">
            <a-timeline-item v-if="item.accessDomainName != null"
              >{{item.accessDomainName}} <span class="time">{{item.warningTime}}</span>
              <span class="count"> 预警次数：{{item.warningNum}}次</span>
              <span class="type"> 诈骗类型：{{item.fraudType}}</span></a-timeline-item
            >
          </a-timeline>

          <a-pagination 
            style="text-align: right;" 
            class="pagination" 
            size="small" 
            :total="historyFraudTotal" 
            show-size-changer 
            show-quick-jumper 
            @change="historyFraudChange"
            v-show="historyFraudTotal !== 0"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {victimBaseInfo,getHistoryFraudDomainPage,getVictimWarningInfo} from '@/api/warning/Portrait.js'

export default {
  name: 'detail',
  components: {
    victimBaseInfo
  },
  data() {
    return {
      victimBaseInfoData: {},
      VictimWarningInfoData: {},
      pageFilter: {
        pageNo: 1, // 当前页数
        pageSize: 10, // 每页显示几条数据
        victimId: this.$route.query.victimId
      },
      historyFraudData: [],
      historyFraudTotal: 0,
    }
  },
  mounted(){
    this.getVictimBaseInfo()
    this.getHistoryFraudDomainPage()
    this.getVictimWarningInfo()
  },
  methods: {
    getVictimBaseInfo() {
      victimBaseInfo({victimId: this.$route.query.victimId}).then((res) => {
            if (res.success) {
              this.victimBaseInfoData = res.result
            }else{
              this.$message.warning(res.message?res.message:'请求失败！')
            }
          }).catch(e=>{
            this.$message.warn("请求失败！");
          }).finally(() => {
            
          })
    },
    getHistoryFraudDomainPage(){
      getHistoryFraudDomainPage(this.pageFilter).then((res) => {
            if (res.success) {
              this.historyFraudData = res.result.records
              this.historyFraudTotal = res.result.total
            }else{
              this.$message.warning(res.message?res.message:'请求失败！')
            }
          }).catch(e=>{
            this.$message.warn("请求失败！");
          }).finally(() => {
            
          })
    },
    historyFraudChange(page, pageSize){
      this.pageFilter.pageNo = page
      this.pageFilter.pageSize = pageSize
      this.getHistoryFraudDomainPage()
    },
    getVictimWarningInfo(){
      getVictimWarningInfo({victimId: this.$route.query.victimId}).then((res) => {
            if (res.success) {
              this.VictimWarningInfoData = res.result
            }else{
              this.$message.warning(res.message?res.message:'请求失败！')
            }
          }).catch(e=>{
            this.$message.warn("请求失败！");
          }).finally(() => {
            
          })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head-title {
  font-weight: bold;
}
.box1 {
  position: relative;
  img {
    width: 40px;
    height: 40px;
  }
  .s1 {
    margin-left: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .s2 {
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  p {
    padding-left: 60px;
  }
  .p1 {
    position: absolute;
    right: 10px;
    bottom: 0;
    img {
      position: absolute;
      top: -13px;
    }
  }
}
.table_box {
  width: 100%;
  tr {
    .t1 {
      width: 10%;
      background-color: #fafafa;
      padding: 10px 20px;
    }
    .t2 {
      width: 10%;
      padding: 10px 20px;
      text-align: left;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
/deep/.ant-timeline-item {
  left: 150px;
  .time {
    position: absolute;
    left: -160px;
  }
  .count {
    position: absolute;
    right: 400px;
    color: #f48093;
    border: 1px solid #f48093;
    padding: 2px 15px;
  }
  .type {
    position: absolute;
    right: 200px;
  }
  .ant-timeline-item-content {
    border-bottom: 1px dotted #ccc;
    padding-bottom: 20px;
  }
}
/deep/.ant-timeline-item-last > .ant-timeline-item-content {
  min-height: 0;
}
</style>
